---
import { siteConfig } from '@config/site';
import Logo from './Logo.astro';
import { getBaseUrl, getFullPath, isHomePage } from '@utils/path';

interface Props {
  isTransparent?: boolean;
}

const { isTransparent = false } = Astro.props;

// 获取当前路径
const currentPath = Astro.url.pathname;
const allowTransparent = isHomePage(currentPath) && isTransparent;

// 处理导航链接
const navLinks = siteConfig.nav.map(item => ({
  ...item,
  href: getFullPath(item.href)
}));
---

<header 
  x-data={`{
    isScrolled: false,
    allowTransparent: ${allowTransparent},
    checkScroll() {
      this.isScrolled = window.pageYOffset > 60;
    }
  }`}
  x-init="
    checkScroll();
    window.addEventListener('scroll', () => checkScroll());
  "
  class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out"
  :class="isScrolled || !allowTransparent ? 'bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm shadow-md' : 'bg-transparent'"
>
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16 items-center">
      <div class="flex-shrink-0">
        <a 
          href={getBaseUrl()} 
          class="transition-all duration-500 ease-in-out"
          :class="isScrolled || !allowTransparent ? 'text-gray-900 dark:text-white' : 'text-white'"
        >
          <Logo class="h-8 sm:h-10" />
        </a>
      </div>
      
      <div class="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-8">
        {navLinks.map((item) => (
          <a
            href={item.href}
            class="px-3 py-2 rounded-md text-sm font-medium transition-all duration-500 ease-in-out"
            :class="isScrolled || !allowTransparent ? 'text-gray-900 dark:text-gray-100 hover:text-gray-500 dark:hover:text-gray-300' : 'text-white hover:text-gray-200'"
          >
            {item.title}
          </a>
        ))}
        
        <!-- 主题切换按钮 -->
        <button
          @click="$store.theme.toggle()"
          class="p-2 rounded-full transition-colors duration-200"
          :class="isScrolled || !allowTransparent ? 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800' : 'text-white hover:bg-white/10'"
        >
          <!-- 月亮图标 (亮色模式) -->
          <svg 
            x-show="!$store.theme.isDark"
            x-cloak
            class="w-5 h-5"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
          <!-- 太阳图标 (暗色模式) -->
          <svg 
            x-show="$store.theme.isDark"
            x-cloak
            class="w-5 h-5"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

<style>
  [x-cloak] { display: none !important; }
  header + * {
    padding-top: 4rem;
  }
</style> 